<template>
    <div class="hsa-adaptive-pane" :class="HsaClass">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
    import { computed } from 'vue'

    // 组件配置
    defineOptions({
        name: 'HsaAdaptivePane'
    })

    // 组件属性
    const props = defineProps({
        // 判断整个页面是否超长出现滚动条，与 toolbar 配合可实现操作栏底部固定效果
        scrollbar: {
            type: Boolean,
            default: false
        },
        // 是否自适应高度，设置为 true 时高度自适应内容高度
        autoHeight: {
            type: Boolean,
            default: false
        }
    })

    // 计算属性：根据 autoHeight 动态设置类名
    const HsaClass = computed(() => ({
        'hsa-adaptive-pane__auto': props.autoHeight,
        'hsa-adaptive-pane__scrollbar': props.scrollbar
    }))
</script>

<style lang="scss">
    .hsa-adaptive-pane {
        margin-top: 12px;
        background: 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        // 判断是否自适应高度
        &__auto {
            flex: 1;
            height: auto;
        }

        // 判断整个页面是否超长出现滚动条，与 toolbar 配合可实现操作栏底部固定效果
        &__auto,
        &__scrollbar {
            overflow-y: auto;

            // 优化滚动条样式
            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: #dcdfe6;
                border-radius: 3px;
            }

            &::-webkit-scrollbar-track {
                background-color: #f5f7fa;
            }
        }
    }
</style>